<template>
	<view class="pageStyle">
		<g-watermark />
		<view style="margin: 20rpx 0;">
			<u-row gutter="16">
				<u-col :span="12">
					<u-search placeholder="按标题搜索" :show-action="false" :input-style="{fontSize:'28rpx'}" :height="50"
						v-model="queryParam.what"></u-search>
				</u-col>
			</u-row>
		</view>
		<view style="display: flex;justify-content: center;align-items: center;margin: 20rpx 0;">
			<u-button size="mini" :hover-class="'buttons'"
				:custom-style="{width:'200rpx',backgroundColor:'#0097ff',padding:'20rpx',border:'none',color:'#fff', fontSize:'32rpx'}"
				@click="searchList">查询</u-button>
		</view>
		<uni-swipe-action ref="swipeAction">
			<uni-swipe-action-item v-for="(item, index) in list" :key="index" style="margin-bottom: 20rpx;">
				<view class="content_box" @longpress="handleLongpress">
					<view class="content_box_top">
						<view class="content_box_checkbox" v-if="isChecked">
							<u-checkbox v-model="item.checked" style="width: 20px;"  @change.stop="checkboxChange($event,item)"></u-checkbox>
						</view>
						<view class="title" @click="appealDetails(item, index)">{{ item.title }}</view>
						<view class="icon" @click="appealDetails(item, index)"><u-tag
								:text="item.haveread ? '已读' : '未读'" shape="circle"
								:type="item.haveread ? 'success' : 'error'" /></view>
					</view>
					<view class="content_box_bottom" @click="appealDetails(item, index)">
						<view class="">{{ item.sender }}</view>
						<view class="">{{ item.createdate }}</view>
					</view>
				</view>
				<template slot="right">
					<view class="slot-button">
						<view class="slot-button-con" style="background-color:#ff5a5f"
							@click="swipeClick({ content: { text: '删除' } }, index, item)">
							<text class="slot-button-text">删除</text>
						</view>
					</view>
				</template>
			</uni-swipe-action-item>
		</uni-swipe-action>
		<view class="body_bottom" v-if="isChecked">
			<view @click="_handleCancel">
				取消
			</view>
			<view @click="_handleSelectAll">
				全选
			</view>
			<view @click="_handleDeleteBatch" style="color:red">
				删除
			</view>
		</view>
	</view>
</template>
<script>
	import listContent from '@/pages/mixin/listMixin.js';
	import {
		mapState
	} from 'vuex';
	import {
		postFormAction,
	} from "@/utils/request.js";
	export default {
		mixins: [listContent],
		data() {
			return {
				describe: '系统消息',
				model: {},
				url: {
					list: '/public/message/list',
					del: '/public/message/del'
				},
				queryParam: {
					skey: '',
					what: ''
					// pageSize:1
				},
				loadHock: false,
				isGet: false,
				isChecked: false
			};
		},
		onLoad(options) {
			this.model = JSON.parse(options.record);
			console.log('loginInfo', this.loginInfo);
			// this.search();
		},
		computed: {
			...mapState(['loginInfo'])
		},
		methods: {
			//改变checkbox状态
			checkboxChange(e, item) {
				console.log("e", e)
				item.checked = e.value
				this.$forceUpdate()
			},
			//全选
			_handleSelectAll() {
				this.list.forEach(item => {
					item.checked = true
				})
				this.list = [...this.list]
			},
			//取消全选
			_handleCancel() {
				this.list.forEach(item => {
					item.checked = false
				})
				this.list = [...this.list]
				this.isChecked = false
			},
			//批量删除
			_handleDeleteBatch() {
				let selectList = this.list.filter(item => item.checked);
				let checkes = selectList.map(item => item.id);
				if (checkes.length == 0) {
					uni.showToast({
						title: '请选择数据',
						icon: 'none'
					});
					return;
				}
				const ids = checkes.join(',');
				console.log('ids', ids);

				const that = this
				uni.showModal({
					title: "提示",
					content: "您确定删除么？",
					success: async (res) => {
						if (res.confirm) {
							that.handleDeleteBatch(ids);
						}
					}
				})
			},
			//长按
			handleLongpress() {
				// this.$emit('update:isChecked', true)
				this.isChecked = true;
				console.log('handleLongpress');
			},
			searchList() {
				this.page = 1;
				this.queryParam.skey = this.loginInfo.skey;
				this.getListData();
			},
			appealDetails(item, index) {
				uni.navigateTo({
					url: `/application/news/newsShowPage?record=${JSON.stringify(item)}`
				});
			},

			//删除
			swipeClick(e, index, item) {
				let {
					content
				} = e;
				if (content.text === "删除") {
					uni.showModal({
						title: "提示",
						content: "是否确定删除",
						success: (res) => {
							if (res.confirm) {
								this.handleDelete(item, index);
							} else if (res.cancel) {
								console.log("用户点击取消");
							}
						},
					});
				} else if (content.text === "提交") {
					this.editModules(item);
				}
			},
			//单个删除
			handleDelete(record, index) {
				postFormAction(this.url.del, {
					ids: record.id,
				}).then((res) => {
					uni.showToast({
						title: res.msg,
					});
					if (res.code == 200) {
						this.list.splice(index, 1);
					}
				});
			},
			//单个删除
			handleDeleteBatch(ids) {
				postFormAction(this.url.del, {
					ids: ids,
				}).then((res) => {
					uni.showToast({
						title: res.msg,
					});
					if (res.code == 200) {
						this.searchList()
						// let arr = ids.split(',');
						// this.list = this.list.filter((item) => {
						// 	return !arr.some(el => el == item.id);
						// });
					}
				});
			},
		}
	};
</script>
<style lang="scss" scoped>
	.pageStyle {
		height: 100%;
		background-color: #f9f9f9;
		overflow-y: auto;
		padding: 20rpx 30rpx;

		.content_box {
			background: #ffffff;
			padding: 40rpx;
			border-radius: 15rpx;
			box-shadow: -3rpx 0px 22rpx 3rpx rgba(87, 193, 189, 0.2);
			margin-bottom: 14rpx;

			&_checkbox {
				width: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
			}

			.content_box_top {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;
				align-items: center;

				.title {
					font-size: 34rpx;
					font-weight: 400;
					color: #323232;
					width: 80%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.content_box_bottom {
				font-size: 28rpx;
				font-weight: 400;
				color: #7d7d7d;
				display: flex;
				justify-content: space-between;
			}
		}

		.slot-button {
			/* #ifndef APP-NVUE */
			display: flex;
			height: 100%;
			/* #endif */
			flex: 1;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			background-color: transparent;
			padding-bottom: 20rpx;

			.slot-button-con {
				height: 100%;
				width: 100%;
				padding: 0 20upx;
				//   border-radius: 16upx;
				/* #ifndef APP-NVUE */
				display: flex;
				height: 100%;
				/* #endif */
				display: flex;
				// flex: 1;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				margin-right: 10rpx;
				margin-left: 10rpx;
			}

			.slot-button-text {
				color: #ffffff;
				font-size: 14px;
			}
		}

		.body_bottom {
			position: fixed;
			bottom: 0;
			height: 100rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			gap: 20rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -2rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
		}
	}
</style>